import React, { useEffect, useRef, memo } from 'react';
import echarts from 'echarts';

export default memo((props) => {
    const chartContainer = useRef();
    const myChart = useRef(null);
    
    useEffect(() => {
        myChart.current = echarts.init(chartContainer.current)
        // echart 初始化
        window.addEventListener('resize', myChart.current.resize);
        // 点击事件
        myChart.current.on('click', params => {
            console.log('params----------', params);
        });
    
        return () => {
            window.removeEventListener('resize', myChart.current.resize);
        }
    }, []);

    useEffect(() => {
        let option = {
            tooltip: {},
            color: ['#eb4310','#f6941d','#fbb417','#ffff00'], // 设置饼图颜色
            title: {
                text: '下发数',
                // subtext: 7789,
                subtext: 1772,
                textStyle: {
                    // color: '#f2f2f2',
                    fontSize: 13,
                    top: '10px',
                    align: 'center'
                },
                subtextStyle: {
                    fontSize: 20,
                    color: ['#ff9d19'],
                    fontWeight: 800
                },
                x: 'center',
                y: 'center'
            },
            grid: {
                bottom: 150,
                left: 100,
                right: '10%'
            },
            series: [
                // 主要展示层的
                {
                    radius: ['40%', '81%'],
                    center: ['50%', '50%'],
                    type: 'pie',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}{d}%',
                            textStyle: {
                                fontSize: 15
                            },
                            position: 'outside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 5,
                            length2: 25
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: [
                        {
                            name: '完成数',
                            value: 1151
                        },
                        {
                            name: '未检查数1',
                            value: 720
                        },
                        {
                            name: '未检查数2',
                            value: 820
                        },
                        {
                            name: '未检查数3',
                            value: 920
                        },
                        {
                            name: '未检查数',
                            value: 1020
                        }
                    ]
                },
                // 边框的设置
                {
                    radius: ['40%', '44%'],
                    center: ['50%', '50%'],
                    type: 'pie',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    animation: false,
                    tooltip: {
                        show: false
                    },
                    data: [
                        {
                            value: 1,
                            itemStyle: {
                                color: 'rgba(250,250,250,0.3)'
                            }
                        }
                    ]
                },
                {
                    name: '外边框',
                    type: 'pie',
                    clockWise: false, //顺时加载
                    hoverAnimation: false, //鼠标移入变大
                    center: ['50%', '50%'],
                    radius: ['65%', '65%'],
                    label: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {
                            value: '',
                            name: '',
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,
                                    borderColor: '#0b5263'
                                }
                            }
                        }
                    ]
                }
            ]
        };
        // 加载Echart前，先清空 function
        myChart.current.clear();
        myChart.current.setOption(option);
    });
    return (
        <div style={{ height: 400, width: '80%' }} ref={chartContainer} id="echart-container-pie"></div>
    )
})